---
title: Next.js
description: Next.js-specifikke lintregler for Ultracite.
---

Next.js-konfigurationen indeholder Next.js-specifikke lintregler for billedoptimering, dokumentstruktur og App Router-mønstre.

## Installation

Tilføj Next.js-konfigurationen til din `biome.jsonc`:

```jsonc title="biome.jsonc"
{
  "extends": ["ultracite/core", "ultracite/next"]
}
```

## Oversigt

Denne konfiguration tilføjer regler specifikke for Next.js-udvikling:

- **Billedoptimering**: Håndhæv brugen af Next.js Image-komponenten
- **Dokumentstruktur**: Forhindre ukorrekt brug af Next.js specielle komponenter
- **Client-komponenter**: Sikre at async client-komponenter håndteres korrekt
- **Konfigurationsfiler**: Speciel håndtering for `next.config.*`-filer

## Next.js-specifikke regler

### Nyudviklet

| Regel | Indstilling | Beskrivelse |
|------|---------|-------------|
| `noNextAsyncClientComponent` | `error` | Forhindre async client-komponenter i Next.js. Client-komponenter bør være synkrone; brug serverkomponenter til async-operationer. |

### Ydeevne

| Regel | Indstilling | Beskrivelse |
|------|---------|-------------|
| `noImgElement` | `error` | Forbyd brug af `<img>` HTML-element. Brug Next.js `<Image>`-komponenten i stedet for automatisk billedoptimering. |

### Stil

| Regel | Indstilling | Beskrivelse |
|------|---------|-------------|
| `noHeadElement` | `error` | Forbyd brug af `<head>` HTML-element. Brug Next.js `next/head` eller App Router metadata-API i stedet. |

### Mistænkelige

| Regel | Indstilling | Beskrivelse |
|------|---------|-------------|
| `noDocumentImportInPage` | `error` | Forhindre import af `next/document` i sidefiler. `_document.tsx` bør kun eksistere i `pages/_document.tsx`. |
| `noHeadImportInDocument` | `error` | Forhindre import af `next/head` i `_document.tsx`. Brug `<Head>` fra `next/document` i stedet. |

## Overskrivelser af konfigurationsfiler

Next.js-preset inkluderer speciel håndtering for konfigurationsfiler og App Router-komponenter:

### Next.js-konfigurationsfiler

```jsonc
{
  "overrides": [
    {
      "includes": ["next.config.*"],
      "linter": {
        "rules": {
          "suspicious": {
            "useAwait": "off"
          }
        }
      }
    }
  ]
}
```

Dette tillader Next.js-konfigurationsmønstre, som normalt måske ikke ville bestå lint-regler.

### App Router-sider og layouts

```jsonc
{
  "overrides": [
    {
      "includes": ["**/page.{ts,tsx,js,jsx}", "**/layout.{ts,tsx,js,jsx}"],
      "linter": {
        "rules": {
          "suspicious": {
            "useAwait": "off"
          }
        }
      }
    }
  ]
}
```

App Router-side- og layoutkomponenter må være async uden krav om `await`, da Next.js håndterer disse særligt for server-side rendering og datahentning.